<template>
  <div class="content">
    <!-- top顶部 -->
    <div class="topScroll">
      <ul>
        <router-link
          v-for="(item, index) in ctg"
          :key="index"
          :to="'/home/photoList/'+ item.id"
          :class="[item.id == 0 ? 'acitve' : '','a']"
          @tap="getPhotoListByCateId(item.id)"
        >{{item.title}}</router-link>
      </ul>
    </div>
    <!-- 内容部分 -->
    <ul class="img-box">
      <router-link
        class="item"
        v-for="(item, index) in list"
        :key="index"
        :to="'/home/photoInfo/' + item.id"
      >
        <img v-lazy="item.img_url">
        <div class="box">
          <p>{{item.title}}</p>
          <p>{{item.zhaiyao}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import IScroll from "iscroll";

export default {
  data() {
    return {
      ctg: [],
      list: [],
    };
  },

  mounted() {
    this.ScrollInit();
  },
  created() {
    this.getCategory();
    this.getPhotoListByCateId(0);
  },
  
  methods: {
    // 分类数据：名称和ID
    getCategory() {
      this.$http.get("api/getimgcategory").then(result => {
        if (result.body.status == 0) {
          result.body.message.unshift({ title: "全部", id: 0 });
          this.ctg = result.body.message;
        }
      });
    },
    getPhotoListByCateId(cateId) {
      this.$http.get("api/getimages/" + cateId).then(result => {
        if (result.body.status == 0) {
          this.list = result.body.message;
        }
      });
    },

    ScrollInit() {
      var myScroll = new IScroll(".topScroll", {
        mouseWheel: true,
        // scrollbars: true,
        scrollX: true
      });
    }
  }
};
</script>
<style lang="less" scoped>
.img-box {
  width: 100%;
  padding: 5px 5px;
  margin: 0;
  padding: 0;
  .item {
    position: relative;
    margin-bottom: 5px;
    text-decoration: none;
    background-color: #ccc;
    text-align: center;
    img {
      width: 100%;
    }
    // 懒加载中的图片
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .box {
      width: 100%;
      height: 60px;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      p {
        color: #fff;
      }
    }
  }
}
.content {
  .topScroll {
    width: 100%;
    height: 20px;
    //   background-color: #ccc;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      width: 1000px;
      height: 100%;

      .a {
        display: block;
        text-align: center;
        float: left;
        width: 80px;
        text-decoration: none;
        color: #030303;
        &.active {
          color: rgb(27, 12, 238);
        }
      }
    }
  }
}
</style>
